<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="container">
    <div th:fragment="top">
        <ul class="nav justify-content-end">
            <div sec:authorize="!isAuthenticated()">
                <li class="nav-item">
                    <a class="nav-link" th:href="@{/login}">登录</a>
                </li>
            </div>

            <div sec:authorize="isAuthenticated()">
                <li class="nav-item">
                    <a class="nav-link active" th:href="@{/logout}">注销</a>
                </li>
            </div>
        </ul>
    </div>
    <div class="card">
        <div class="card-header">头部</div>
        <div class="card-body">首页</div>
        <div class="row">
            <div class="col-sm-4">
                <h4>vip1</h4>
                <ul class="list-group ">
                    <li class="list-group-item"><a th:href="@{/vip1/1}">1</a></li>
                    <li class="list-group-item"><a th:href="@{/vip1/2}">2</a></li>
                    <li class="list-group-item"><a th:href="@{/vip1/3}">3</a></li>
                </ul>
            </div>

            <div class="col-sm-4">
                <h4>vip2</h4>
                <ul class="list-group">
                    <li class="list-group-item"><a th:href="@{/vip2/1}">1</a></li>
                    <li class="list-group-item"><a th:href="@{/vip2/2}">2</a></li>
                    <li class="list-group-item"><a th:href="@{/vip2/3}">3</a></li>
                </ul>
            </div>

            <div class="col-sm-4">
                <h4>vip3</h4>
                <ul class="list-group">
                    <li class="list-group-item"><a th:href="@{/vip3/1}">1</a></li>
                    <li class="list-group-item"><a th:href="@{/vip3/2}">2</a></li>
                    <li class="list-group-item"><a th:href="@{/vip3/3}">3</a></li>
                </ul>
            </div>

        </div>

        <div class="card-footer">底部</div>
    </div>
</div>
</body>
</html>